<template>
    <div class="bookPage" @click="clickPage" ref="bookPage">
            <div v-show="page1Show" class="page overflowHidden"
            v-for="(item, index) in []" :key="index"
            :style="'background: var(--bookReadColor);' + 'left : ' + page1Letf + '%'" ref="page1">
                <div class="fictionName" @click.stop="$router.back(-1);$router.isBack = true">
                    <van-icon name="arrow-left" />
                    {{ Book.bookRead.poi == 0 ? $route.query.fName : chapter.fictionChapter && 
                    chapter.fictionChapter.chapterName }}
                </div>
                <div class="box" :style="{height : offsetHeight + 'px'}">
                    <div class="content" v-if="chapter.fictionChapter" ref="content1">
                        <h1>{{ chapter.fictionChapter.chapterName }}</h1>
                        <p v-for="(item,index) in chapter.contents" :key="index">
                            {{ item }}
                        </p>
                    </div>
                </div>
                <div>{{ Book.bookRead.poi + 1 }}/{{ Book.bookRead.pageLength }}</div>
            </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    props : ['chapter'],
    data() {
        return {
            poh : 0,
            pow : 0,

            offsetHeight : 0,//content可见区域高度
            offsetWidth : 0,//content可见区域宽度

            pois : 1,

            page1 : null,
            page2 : null,

            transitionName : 'nextPage',
            
            page1Show : true,
            page2Show : true,
            
            middleW : 100,//中间点击区域宽度
            middleH : 150,//中间点击区域高度

            textNum : 0,//文字宽度
            textHeight : 32,//文字高度

            content1 : null,//content1
            content2 : null,//content2
            scrollHeight : 0,//

            isAnimation : null,//当前播放的动画
            fn2 : () => {}
        }
    },
    computed : {
        ...mapState(['Book'])
    },
    created(){
        this.$on('init', this.initAftr)
    },
    mounted(){
        // this.initAftr()
    },
    methods : {

        initAftr(){
            let self = this

            if(self.$refs.content1){
                self.$refs.content1.style.height = '0px'
            }
            self.page1Show = true
            self.page2Show = true
            self.poh = (self.$refs.bookPage.offsetHeight - this.middleH) / 2
            self.pow = (self.$refs.bookPage.offsetWidth - this.middleW) / 2

            self.$nextTick(() => {
                function initAftr() {
                    if (self.$refs.content1) {
                        self.init()
                    }else{
                        setTimeout(() => {
                            initAftr()
                        }, 50)
                    }
                }
                initAftr()
            })
        },

        init(data){

            if(!this.$refs.content1){
                return
            }

            this.content1 = this.$refs.content1
            this.content2 = this.$refs.content2

            this.scrollHeight = this.$refs.content1.scrollHeight

            this.offsetHeight = Math.floor((this.$refs.bookPage.offsetHeight - 100) / 40) * 40

            this.Book.bookRead.pageLength = Math.ceil(this.scrollHeight / this.offsetHeight)



            this.content1.style.height = this.scrollHeight + 'px'

            this.$emit('afterInit')

            this.content1.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
            this.content2.style.top = - (this.Book.bookRead.poi * this.offsetHeight) + 'px'
        },

        // 页面被点击
        clickPage(e){

            let x = e.clientX
            let y = e.clientY

            if(x < this.pow || y < this.poh){
                this.upperPage()
            }else if(this.pow + this.middleW < x || this.poh + this.middleH < y){
                this.nextPage()
            }else{
                this.$emit('clickPage', e)
            }
        },
        // 下一页
        nextPage(){
            this.transitionName = 'nextPage'
            if(this.Book.bookRead.poi + 1 < this.Book.bookRead.pageLength){

            }else{

            }
        },
        // 上一页
        upperPage(){
            if(this.Book.bookRead.poi > 0){
                this.Book.bookRead.poi--
            }else{

            }
        },
    }
}
</script>

<style scoped>
.bookPage{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.page{
    position: absolute;
    top: 0px;
    left: 0px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    padding: 10px;
    overflow-y: scroll;
}
.tran.page{
    left: -100%;
}
.page.overflowHidden .box{
    overflow: hidden;
}
.fictionName{
    height: 20px;
    width: 100%;
}
.box{
    position: relative;
    width: 100%;
    margin: 20px 0;
}
.content{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.content h1{
    line-height: 40px;
    padding-bottom: 40px;
}
.content p{
    font-size: 19px;
    line-height: 40px;
}


.upperPage-leave-active,
.nextPage-leave-active {
  transition: transform 0.7s;
  box-shadow: 0px 10px 30px rgb(0, 0, 0);
}

.nextPage-leave-to {
  transform: translateX(-100%);
}
.nextPage-enter{
  transform: translateX(100%);
}

.upperPage-leave-to {
  transform: translateX(100%);
}
.upperPage-enter{
  transform: translateX(-100%);
}

</style>